
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Clock, Users, GraduationCap, BookOpen, Eye, Play, Download, Star, Flame } from "lucide-react";

interface UnifiedCardProps {
  // Core content
  title: string;
  description: string;
  
  // Top tags
  subjectLabel: string;
  difficultyLevel: string;
  
  // Topic tags (skills/focus areas)
  topicTags: string[];
  
  // Meta information
  gradeLevel?: string;
  duration: string;
  subject?: string;
  userCount: number;
  rating?: number;
  
  // Actions
  onPreview?: () => void;
  onPrimaryAction: () => void;
  primaryActionLabel: string;
  previewLabel?: string;
  
  // Optional features
  isHot?: boolean;
  isPriority?: boolean;
}

export function UnifiedCard({
  title,
  description,
  subjectLabel,
  difficultyLevel,
  topicTags,
  gradeLevel,
  duration,
  subject,
  userCount,
  rating,
  onPreview,
  onPrimaryAction,
  primaryActionLabel,
  previewLabel = "Preview",
  isHot = false,
  isPriority = false
}: UnifiedCardProps) {
  const getDifficultyColor = (level: string) => {
    switch (level.toLowerCase()) {
      case 'beginner':
        return 'bg-green-100 text-green-700 border-green-200';
      case 'intermediate':
        return 'bg-yellow-100 text-yellow-700 border-yellow-200';
      case 'advanced':
        return 'bg-red-100 text-red-700 border-red-200';
      default:
        return 'bg-gray-100 text-gray-700 border-gray-200';
    }
  };

  return (
    <Card className="bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 h-full">
      <CardHeader className="p-6 pb-4">
        {/* Top Tags */}
        <div className="flex items-center gap-2 mb-3">
          <Badge variant="outline" className="text-xs font-medium border-gray-300">
            {subjectLabel}
          </Badge>
          <Badge className={`text-xs font-medium ${getDifficultyColor(difficultyLevel)}`}>
            {difficultyLevel}
          </Badge>
          {isHot && (
            <div className="flex items-center">
              <Flame className="w-4 h-4 text-orange-500" />
            </div>
          )}
        </div>

        {/* Title Section */}
        <div className="space-y-2">
          <div className="flex items-start justify-between">
            <CardTitle className="text-lg font-bold text-gray-900 line-clamp-2 leading-tight">
              {title}
            </CardTitle>
            {rating && (
              <div className="flex items-center gap-1 ml-2">
                <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                <span className="text-sm text-gray-600">{rating}</span>
              </div>
            )}
          </div>
          <CardDescription className="text-sm text-gray-600 line-clamp-2">
            {description}
          </CardDescription>
        </div>

        {/* Topic Tags Row */}
        <div className="flex flex-wrap gap-2 mt-4">
          {topicTags.slice(0, 4).map((tag) => (
            <Badge
              key={tag}
              variant="secondary"
              className="text-xs bg-blue-50 text-blue-700 border-blue-200 rounded-full px-3 py-1"
            >
              {tag}
            </Badge>
          ))}
        </div>
      </CardHeader>

      <CardContent className="p-6 pt-0 space-y-4">
        {/* Meta Info Section */}
        <div className="grid grid-cols-2 gap-3 text-sm">
          {gradeLevel && (
            <div className="flex items-center gap-2 text-gray-600">
              <GraduationCap className="w-4 h-4 text-gray-500" />
              <span>{gradeLevel}</span>
            </div>
          )}
          <div className="flex items-center gap-2 text-gray-600">
            <Clock className="w-4 h-4 text-gray-500" />
            <span>{duration}</span>
          </div>
          {subject && (
            <div className="flex items-center gap-2 text-gray-600">
              <BookOpen className="w-4 h-4 text-gray-500" />
              <span>{subject}</span>
            </div>
          )}
          <div className="flex items-center gap-2 text-gray-600">
            <Users className="w-4 h-4 text-gray-500" />
            <span>{userCount.toLocaleString()} users</span>
          </div>
        </div>

        {/* Bottom Action Buttons */}
        <div className="flex gap-2 pt-2">
          {onPreview && (
            <Button
              variant="outline"
              size="sm"
              onClick={onPreview}
              className="flex-1 bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
            >
              <Eye className="w-4 h-4 mr-2" />
              {previewLabel}
            </Button>
          )}
          <Button
            size="sm"
            onClick={onPrimaryAction}
            className="flex-1 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium"
          >
            <Play className="w-4 h-4 mr-2" />
            {primaryActionLabel}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}
